<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <video id="local-video"></video>
    <video id="remote-video"></video>


    <script>
        const localVideo = document.getElementById('local-video');
        const remoteVideo = document.getElementById('remote-video');

        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
            .then(stream => {
                localVideo.srcObject = stream;
                localVideo.play();
                const pc = new RTCPeerConnection();
                pc.addStream(stream);
                pc.ontrack = event => {
                    remoteVideo.srcObject = event.streams[0];
                    remoteVideo.play();
                };
                pc.createOffer()
                    .then(offer => pc.setLocalDescription(offer))
                    .then(() => {
                        // 将offer发送到远程浏览器
                    });
            });
    </script>
</body>

</html>